<template>
  <div id="mainMap" ref="mainMap" style="width:100%;height:100%"></div>
</template>
<script setup>
import { reactive, onMounted, getCurrentInstance, ref, onUnmounted} from "vue";
import * as echarts from 'echarts';
import { ElMessage } from "element-plus";



const { proxy } = getCurrentInstance()

const mainMap = ref()
const state = reactive({
  beforeCode:[],
  publicUrl: 'https://geo.datav.aliyun.com/areas_v3/bound/'
})

onMounted(() => {
  initChart()
})

onUnmounted(() => {
    mainMap.value && mainMap.value.dispose();
})


// 初始时，获取全国的数据
const initChart = async () => {
  let chartDom = document.getElementById('mainMap');
  mainMap.value = echarts.init(chartDom);
  let alladcode = await getGeoJson('all.json') // 调用方法获取json文件数据
  let chinaGeoJson = await getGeoJson('100000_full.json')

  initCharts(chinaGeoJson.data, '全国', alladcode.data) // 第一次画图
}
// 获取地图json数据
const getGeoJson = (jsonName) => {
  return proxy.$http.get(`${state.publicUrl}${jsonName}`)
}

// 画图
const initCharts = (geoJson, name, alladcode) => {
  echarts.registerMap(name, geoJson);
  let option = {
    backgroundColor: "#061740",
    title: {
      text: name,
      left: 'center'
    },
    series: [{
      type: 'map',
      map: name,
      itemStyle: {
        areaColor: '#1890ff'
      }
    }]
  }
  mainMap.value.setOption(option); // 设置true，上一次渲染的数据不会影响下二次

  // 监听窗口变化，重绘图表
  window.addEventListener("resize", () => {
      mainMap.value.resize();
  });
  
  mainMap.value.off('click')
  // 监听点击事件，递归实现下钻功能
  mainMap.value.on('click', params => {
    console.log(params,"点击地图")
    console.log(alladcode.filter(areaJson => areaJson.name === params.name)[0],"查找的code")
    let clickRegionCode = alladcode.filter(areaJson => areaJson.name === params.name)[0];
    
    if(clickRegionCode.level === "district"){
      ElMessage.warning("没有下级区域了")
      return;
    }

    state.beforeCode.push(clickRegionCode)
    getGeoJson(clickRegionCode.adcode + '_full.json').then(regionGeoJson =>
        initCharts(regionGeoJson.data, params.name, alladcode)
    ).catch(err => {
      // getGeoJson('100000_full.json').then(
      //   chinaGeoJson => initCharts(chinaGeoJson.data, '全国', alladcode)
      // )
    })
  })

  // mainMap.value.getZr().off()
  // mainMap.value.getZr().on('click', params => {
  //   console.log(params,state.beforeCode,"点击地图空白")
  //   if(params.target) return;

  //   let obj = state.beforeCode.pop()
  //   console.log(obj,state.beforeCode,"回退的数据")
  //   getGeoJson(obj.adcode + '_full.json').then(regionGeoJson =>
  //     initCharts(regionGeoJson.data, obj.name, alladcode)
  //   ).catch(err => {
  //       // getGeoJson('100000_full.json').then(
  //       //   chinaGeoJson => initCharts(chinaGeoJson.data, '全国', alladcode)
  //       // )
  //     })
    
  // })
}


</script>
<style lang="scss" scoped>
</style>